<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    img {
        height: 400px;
        
    }
</style>

<body>
    <!-- 1.步骤一  将src改成默认图loading 真实的地址放进data属性上 -->
    <img src="https://kg.zhaodashen.cn/web/images/loading4.gif"  src-real="./imgs1/01.jpg" alt=""><br/>
    <img src="https://kg.zhaodashen.cn/web/images/loading4.gif"  src-real="./imgs1/02.jpg" alt=""><br/>
    <img src="https://kg.zhaodashen.cn/web/images/loading4.gif"  src-real="./imgs1/03.jpg" alt=""><br/>
    <img src="https://kg.zhaodashen.cn/web/images/loading4.gif"  src-real="./imgs1/04.jpg" alt=""><br/>
    <img src="https://kg.zhaodashen.cn/web/images/loading4.gif"  src-real="./imgs1/05.jpg" alt=""><br/>
    <img src="https://kg.zhaodashen.cn/web/images/loading4.gif"  src-real="./imgs1/06.jpg" alt=""><br/>
    <img src="https://kg.zhaodashen.cn/web/images/loading4.gif"  src-real="./imgs1/07.jpg" alt=""><br/>
    <img src="https://kg.zhaodashen.cn/web/images/loading4.gif"  src-real="./imgs1/08.jpg" alt="">
    <script>
        // <!-- 2.步骤二  监控网页滚动条滚动  将src改成真实的、在data属性上的地址 -->
        function lazyLoad() {
            //  2.1 每次获取最新的总可视内容高度  可见视口高度+滚动条滚动高度
            let temp1 = window.innerHeight || document.documentElement.clientHeight;
            let temp2 = document.body.scrollTop || document.documentElement.scrollTop;
            let maxShowHeight = temp1 + temp2;
            // console.log(temp1,temp2,maxShowHeight)
            //  2.2 获取所有图片
            let aimg = document.querySelectorAll("img");
            //  2.3 遍历
            aimg.forEach(function(item){
                //  2.4 判断：当前图片的.offsetTop < 2.1(可见视口高度+滚动条滚动高度) 
                if (item.offsetTop < maxShowHeight) {
                    // 不成立 不用管
                    // 成立   修改图片地址的src地址，改成真的 
                    item.src = item.getAttribute("src-real");
                    // console.log(item.getAttribute("data"))
                }
            })
        }
        lazyLoad()
        let t = null;
        window.onscroll  =  function() {
        clearTimeout(t)
            t = setTimeout(() => {
                lazyLoad()
            }, 500)
        }


    </script>
</body>

</html>